<template>
  <div class="div-show">
    <div class="logos">logo</div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-col>
        
        <el-dropdown trigger="click" v-for="(item,j) in tableData[1].title" :key="j">
          <span class="el-dropdown-link">
            {{item}}         
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item >黄金糕</el-dropdown-item>
            <el-dropdown-item >狮子头</el-dropdown-item>
            <el-dropdown-item >螺蛳粉</el-dropdown-item>
            <el-dropdown-item >双皮奶</el-dropdown-item>
            <el-dropdown-item >蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
     
    </el-menu>
    
    <el-row>
      <el-col>
        <div class="block">
          <el-carousel trigger="click" :height="height">
            <el-carousel-item v-for="(item,k) in tableData[0].fits" :key="k">
              <div>{{item}}</div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <div class="list-item" v-for="(item,index) in tableData[2].b" :key="index" @click="getpage(item.index)">
      <div class="list-box">
          <ul class="rols">
            <li>{{item}}
            </li>
            <li>
              更多
            </li>
          </ul>
          <p>内容01</p>
          <p>内容02</p>
          <p>内容03</p>
      </div>
    </div>
  </div>
</template>


<script>

export default {
  data() {
    return {
      tableData: [
        {
          fits: ["fill", "contain", "cover", "none", "scale-down"]
        },
        {
          title: ["栏目1", "栏目2", "栏目3"]
        },
        {
          b: ["标题1", "标题2", "标题3"]
        }
      ],
     

    };
  },
  //beforeMount:function(){
  //       this.height = $(window).width()*664/1920 + 'px';
  //},
  methods: {
    handleSelect(key, keyPath) {
      console.log(key);
      console.log(keyPath);
    },
    getpage(id){
      console.log(id)
      this.$router.push(
        {
          name:`page`,
        
        }
      )
    }
  },
  watch:{
    
  }
};
</script>

<style lang="scss" scoped>
@import "index.scss"
</style>
